<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<body class="hold-transition skin-blue sidebar-mini">

<section class="content-header">
    <h1>提报计划查询</h1>
</section>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <table id="t1" class="t1">
                        <thead style="display: table-header-group">
                        <tr>
                            <td colspan="12">
                                <img th:src="@{/img/logo3.jpg}" width="64px" height="40px" style="margin-top: -30px">
                                <div style="display: inline-block;margin-top: 5px;margin-left: 20px">
                                    <span style="letter-spacing: 24px;display: block;line-height: 20px">&nbsp;辽宁忠旺机械设备制造有限公司</span>
                                    <span style="display: block;font-size: 12px;line-height: 20px">Liaoning Zhongwang Machinery Equipment Manufacturing Co., Ltd</span>
                                </div>
                            </td>
                            <td rowspan="2" style="width: 9%">
                                <div id="qrCode-div" style="display: none"></div>
                                <img id="qr-img" width="80px" height="80px">
                            </td>
                        </tr>
                        <tr>
                            <td colspan="12" style="font-size: 16px;letter-spacing: 4px;">
                                <span th:if="${sheet.reportType == 1}">外购件计划单</span>
                                <span th:if="${sheet.reportType == 2}">外协件计划单</span>
                                <span th:if="${sheet.reportType == 3}">原材料计划单</span>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" style="width: 8%;">项目编号</td>
                            <td style="width: 10%;">
                                [[${sheet.proCode}]]
                            </td>
                            <td style="width: 8%">项目名称</td>
                            <td colspan="3" style="width: 30%">
                                [[${sheet.proName}]]
                            </td>
                            <td style="width: 8%">项目数量</td>
                            <td style="width: 6%">
                                [[${sheet.proNum}]]
                            </td>
                            <td style="width: 6%">类型</td>
                            <td style="width: 9%">
                                [[${sheet.malType}]]
                            </td>
                            <td style="width: 6%">部分</td>
                            <td style="width: 9%">
                                [[${sheet.part}]]
                            </td>
                        </tr>

                        </thead>

                    </table>

                </div>
                <div class="box-body">
                    <!--<h3 th:if="${sheet.reportType == 1}">外购件计划单</h3>
                    <h3 th:if="${sheet.reportType == 2}">外协件计划单</h3>
                    <h3 th:if="${sheet.reportType == 3}">原材料计划单</h3>
                    <h4>
                        项目编号:[[${sheet.proCode}]]&nbsp;&nbsp;&nbsp;&nbsp;
                        项目名称:[[${sheet.proName}]]&nbsp;&nbsp;&nbsp;&nbsp;
                        项目数量:[[${sheet.proNum}]]&nbsp;&nbsp;&nbsp;&nbsp;
                        类型:[[${sheet.malType}]]&nbsp;&nbsp;&nbsp;&nbsp;
                        部分:[[${sheet.part}]]&nbsp;&nbsp;&nbsp;&nbsp;
                    </h4>-->
                    <form id="queryForm" onsubmit="return false;">
                        <input type="hidden" name="sheetId" th:value="${sheet.id}">
                        <!--<div class="row">
                            <div class="form-inline">
                                <div class="form-group">
                                    <label for="query-status">接收状态</label>
                                    <select id="query-status" class="form-control" name="recMark">
                                        <option value="" selected>请选择</option>
                                        <option value="0">未接收</option>
                                        <option value="1">已接收</option>
                                    </select>
                                </div>
                                <button type="button" class="btn btn-success" id="btn-search"
                                        onclick="js.table.search(table)">
                                    <span class="Bold">搜索</span>
                                </button>
                            </div>
                        </div>-->
                    </form>
                    <table id="bootstrap-table"></table>
                </div>
            </div>
        </div>
    </div>
</section>
<input type="hidden" id="reportType" th:value="${sheet.reportType}">
<div th:include="include :: footer"></div>
<script th:inline="javascript">

    let table, columns,
        sheetId = +$("#sheetId").val(),
        reportType = +$("#reportType").val();

    let gloDeptName = toUtf8('辽宁忠旺机械设备制造有限公司 ' + [[${sheet.deptName}]] + ' ' + [[${sheet.branchName}]]);

    $("#qrCode-div").qrcode({
        width: 80,
        height: 80,
        text: gloDeptName
    });

    /** 选择计划提报类型 */
    function handlerPage() {
        switch (reportType) {
            case 1:
                columns = [
                    {title: '序号', field: 'id', width: '50',
                        formatter: function (value, row, index) {
                            return index + 1;
                        }
                    },
                    {title: "物料描述", field: 'malDesc'},
                    {title: "数量", field: 'num',
                        formatter: function (value) {
                            return js.format(value);
                        }
                    },
                    {title: "单位", field: 'unit'},
                    {title: "型号/标准号", field: 'standard'},
                    {title: "品牌", field: 'brand'},
                    {title: "备注", field: 'remark', width: '300px'},
                    {title: "接收状态", field: 'recMark',
                        formatter: function (value) {
                            if (value === 0) {
                                return '<span class="badge label-inverse">未接收</span>';
                            } else if (value === 1) {
                                return '<span class="badge label-success">已接收</span>';
                            }
                        }
                    },
                    {title: "接收时间", field: 'recTime'},
                    {title: "附件", field: 'url',
                        formatter: function (value) {
                            if (value) {
                                return '<a target="_blank" href="' + value + '">下载</a>'
                            }
                            return '';
                        }
                    }
                ];
                break;
            case 2:
                columns = [
                    {title: '序号', field: 'id', width: '50',
                        formatter: function (value, row, index) {
                            return index + 1;
                        }
                    },
                    {title: "物料描述", field: 'malDesc'},
                    {title: "图号", field: 'diagram'},
                    {title: "数量", field: 'num',
                        formatter: function (value) {
                            return js.format(value);
                        }},
                    {title: "单位", field: 'unit'},
                    {title: "外协类型", field: 'assistType'},
                    {title: "备注", field: 'remark', width: '300px'},
                    {title: "接收状态", field: 'recMark',
                        formatter: function (value) {
                            if (value === 0) {
                                return '<span class="badge label-inverse">未接收</span>';
                            } else if (value === 1) {
                                return '<span class="badge label-success">已接收</span>';
                            }
                        }
                    },
                    {title: "接收时间", field: 'recTime'},
                    {title: "附件", field: 'url',
                        formatter: function (value) {
                            if (value) {
                                return '<a target="_blank" href="' + value + '">下载</a>'
                            }
                            return '';
                        }
                    }
                ];
                break;
            case 3:
                columns = [
                    {title: '序号', field: 'id', width: '50',
                        formatter: function (value, row, index) {
                            return index + 1;
                        }
                    },
                    {title: "物料描述", field: 'malDesc'},
                    {title: "数量", field: 'num',
                        formatter: function (value) {
                            return js.format(value);
                        }},
                    {title: "单位", field: 'unit'},
                    {title: "型号/标准号", field: 'standard'},
                    {title: "材质", field: 'quality'},
                    {title: "使用库存", field: 'useStore',
                        formatter: function (value) {
                            if (value === 1) {
                                return '<span class="badge label-success">是</span>';
                            } else if (value === 2) {
                                return '<span class="badge label-inverse">否</span>';
                            }
                        }
                    },
                    {title: "备注", field: 'remark', width: '300px'},
                    {title: "接收状态", field: 'recMark',
                        formatter: function (value) {
                            if (value === 0) {
                                return '<span class="badge label-inverse">未接收</span>';
                            } else if (value === 1) {
                                return '<span class="badge label-success">已接收</span>';
                            }
                        }
                    },
                    {title: "接收时间", field: 'recTime'},
                    {title: "附件", field: 'url',
                        formatter: function (value) {
                            if (value) {
                                return '<a target="_blank" href="' + value + '">下载</a>'
                            }
                            return '';
                        }
                    }
                ];
                break;
        }
    }

    $(function () {

        handlerPage();

        /** 加载列表 */
        table = js.table.init({
            url: ctx + "report/query/plan/list",
            exportOptions : {
            },
            // showExport: false,
            paginationVAlign: 'bottom',
            rowStyle: function (row, index) {
                if (row.isReturn === 1) {
                    return {
                        css: {color: 'red'}
                    };
                } else {
                    return {}
                }
            },
            columns: columns
        });

        let c = document.getElementsByTagName('canvas')[0];
        $("#qr-img").attr("src", c.toDataURL("image/png"));

    });
</script>
</body>
</html>
